<template>
  <el-card style="background-color: #fffffA;width: 100%;height: auto;margin-bottom: 10px">
    <el-row style="height: 100%;">
      <el-col :span="16" style="height: 100%">
        {{ travelTrack }}
      </el-col>
      <el-col :span="8" style="height: 100%">
        <el-button type="warning" size="small" @click="dialogFormVisible = true">预定路线</el-button>
      </el-col>
      <el-dialog title="预定信息" :visible.sync="dialogFormVisible" style="width: auto">
        <el-form :model="form">
          <el-form-item label="预定人数" :label-width="formLabelWidth">
            <el-input-number v-model="form.num" :precision="0" :min="1" :max="10" label="描述文字"></el-input-number>
          </el-form-item>
          <el-form-item label="导游需求" :label-width="formLabelWidth">
            <el-radio-group v-model="form.region" fill="#FF9966">
              <el-radio label="1">需要预定导游</el-radio>
              <el-radio label="2">不需要导游</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="预定日期" :label-width="formLabelWidth">
            <el-date-picker
                v-model="form.date"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="danger" plain @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="danger" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>

    </el-row>
  </el-card>
</template>

<script>
export default {
  name: "Track",
  data() {
    return {
      travelTrack: '八路军驻西安办事处-鄂豫陕苏维埃政府葛牌镇纪念馆-汪锋同志故居',
      dialogFormVisible: false,
      formLabelWidth: '120px',
      form: {
        num: 1,
        name: '',
        region: '1',
        date: ''
      }
    }
  }
}
</script>

<style scoped>

</style>
<style>
.el-card__body {
  height: 100%;
}
.el-dialog {
  width: 500px !important;
}
</style>